<html>
  <head>
    <title>simpleVue</title>
    <!-- <script src="./vue/observer.js"></script>
        <script src="./vue/watcher.js"></script>
        <script src="./vue/compile.js"></script>
        <script src="./vue/index.js"></script> -->
    <style>
      #app {
        text-align: center;
      }
    </style>
    <!-- <script src="http://simple-vue.fanchao.site"></script> -->
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{ title }}</h2>
      <input v-model="name" />
      <div>{{ name }}</div>
      <h1 v-on:click="showComputed">{{ name }}</h1>
      <div>谁是最帅的人(计算属性):{{ handsome }}</div>
      <button @click="clickMe">click me</button>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data: {
        title: 'simple vue',
        name: 'fanchao',
      },
      computed: {
        handsome () {
          return this.name === 'fanchao'
            ? '樊超' : this.name === 'fan'
              ? '樊' : 'nobody'
        }
      },
      methods: {
        showComputed () {
          this.handsome = 1
          console.log('计算属性为handsome：', this.handsome)
        },
        clickMe() {
          this.title = 'simple vue has been click'
          this.name = 'Vue is awesome'
        },
        asyncQuery() {
          this.title = 'timeout 1000';
        }
      },
      mounted() {
        setTimeout(() => {
          this.title = 'timeout 500'
          setTimeout(() => {
            this.asyncQuery()
          }, 1000);
        }, 500);
      }
    });
  </script>
</html>
